<template>
  <Row class="form-design layout" :gutter="16">
    <Col :span="4" class="drag-panel">
      <Card dis-hover>
        <div slot="title">
          <Icon type="md-cube"></Icon>
          组件面板
        </div>
      <slot name="drag"></slot>
      <drag-panel :basic-item="basicItem" :personal-item="personalItem" :layout-item="layoutItem"></drag-panel>
      </Card>
    </Col>
    <Col :span="15">
      <Card dis-hover class="pandx">
        <div slot="title">
          <Row>
            <Col span="8">
              <slot name="formName"> </slot>
            </Col>
            <Col span="16">
              <slot name="controlButton">
              </slot>
              <Button v-if="clear" type="text" size="default" icon="ios-trash-outline"
                      @click="handleClear">清空
              </Button>
              <Button v-if="preview" type="text" size="default" icon="ios-aperture-outline" @click="handleRender">预览
              </Button>
              <Button v-if="imp" type="text" size="default" icon="ios-cloud-upload-outline"
                      @click="handleImport">导入
              </Button>
              <Button v-if="exp" type="text" size="default" icon="ios-cloud-download-outline"
                      @click="handleExport">导出
              </Button>
            </Col>
          </Row>
        </div>
        <design-panel :data="data" ref="designPanel" :selectForm="selectForm" @changeSelectItem="changeSelectItem"/>

      </Card>
    </Col>
    <Col :span="5" class="prop-panel">
      <Card header="属性配置" dis-hover>
        <Properties :data="data" :selectItem="selectItem">
          <template slot="custom-properties" :selectItem="selectItem">
            <slot name="custom-properties" :selectItem="selectItem"></slot>
          </template>
          <template slot="form-extend-properties" :data="data">
            <slot name="form-extend-properties" :data="data"></slot>
          </template>
          <template slot="extend-tab" :data="data">
            <slot name="extend-tab" :data="data"></slot>
          </template>
        </Properties>
      </Card>
    </Col>
    <render-preview ref="renderPreview" v-if="renderPreviewVisible"/>
    <export-template ref="exportTemplate" v-if="exportTemplateVisible"/>
    <import-template ref="importTemplate" v-if="importTemplateVisible" @import="importSuccess"/>

  </Row>
</template>

<script>

import cloneDeep from 'lodash/cloneDeep';

import DragPanel from './drag-panel/index';
import DesignPanel from './design-panel/index';
import Properties from './properties/index';

import ExportTemplate from '../preview/export-template';
import ImportTemplate from '../preview/import-template';
import RenderPreview from '../preview/render-preview';

export default {
  name: 'FormDesign',
  data() {
    return {
      renderPreviewVisible: false,
      exportTemplateVisible: false,
      importTemplateVisible: false,


      data: {
        list: [],
        config: {
          labelPosition: 'left',
          labelWidth: 100,
          size: 'default',
          outputHidden: true,
          hideRequiredMark: true,
          customStyle: '',
        },
      },

      selectItem: {},
    };
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        if (this.selectForm && this.selectForm.id) {

          const jsonForm = JSON.stringify(this.selectForm.htmlModel);
          const jsonData = JSON.stringify(this.data);
          if (jsonForm !== jsonData) {
            this.$set(this.selectForm, 'change', true);
            this.$set(this.selectForm, 'htmlModel', cloneDeep(this.data));
          }
        }
      },

      deep: true,
    },
    selectForm: {
      handler(newValue, oldValue) {
        if (newValue && newValue.id !== (oldValue ? oldValue.id : '')) {


          const htmlModel = newValue.htmlModel;

          let jsonModel = htmlModel ? (typeof htmlModel == 'object' ? htmlModel : JSON.parse(htmlModel)) : null;

          this.initModel(cloneDeep(htmlModel));

        }
      },
      deep: true,
    },

  },
  props: {
    selectForm: {
      type: Object,
    },
    customComponents: {
      type: Array,
      default: () => [],
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },

    clear: {
      type: Boolean,
      default: true,
    },
    preview: {
      type: Boolean,
      default: true,
    },
    imp: {
      type: Boolean,
      default: true,
    },
    exp: {
      type: Boolean,
      default: true,
    },

    basicItem: {
      type: [Boolean, Array],
      default: true,
    },

    personalItem: {
      type: [Boolean, Array],
      default: true,
    },

    layoutItem: {
      type: [Boolean, Array],
      default: true,
    },
  },
  provide: function () {
    return {
      customC: this.customComponents,
      ngConfigC: this.config,
    };
  },
  components: {
    DesignPanel, DragPanel, Properties, ImportTemplate, ExportTemplate, RenderPreview,
  },
  created() {

    if (this.config.httpConfig) {
      window.httpConfig = this.config.httpConfig;
    }

  },
  methods: {
    changeSelectItem(item) {
      this.selectItem = item;
    },

    handleClear() {
      this.$Modal.confirm({
        title: '清空后将无法恢复，请确认您的操作？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.data.list = [];
        },
      });
    },

    initModel(models) {
      if (models) {
        this.data = models;
      } else {
        this.data.list = [];
      }

      this.selectItem = {};
      this.$refs.designPanel.selectItem = {};
    },
    getModel() {
      return this.data;
    },


    handleRender() {

      this.renderPreviewVisible = true;
      this.$nextTick(() => {
        this.$refs.renderPreview.init(this.data);
        this.$refs.renderPreview.active='preview';
      });
    },

    handleExport() {
      this.exportTemplateVisible = true;
      this.$nextTick(() => {
        this.$refs.exportTemplate.init(this.data);
      });

    },

    handleImport(){
      this.importTemplateVisible=true;
      this.$nextTick(()=>{
        this.$refs.importTemplate.init();
        this.$refs.importTemplate.editorJson='';
      });
    },

    importSuccess(data){
      this.data=data;
    }
  },
};
</script>

<style lang="less" scoped>
.pandx::v-deep .ivu-card-head{
  padding:5px 16px !important;
  .ivu-row:first-child{
    text-align: left;
  }
  .ivu-row:last-child{
    text-align: right;
  }
}
.pandx::v-deep .ivu-card-body{
  height:calc(100vh - 318px);
}
.prop-panel::v-deep .ivu-card-body{
  height:calc(100vh - 275px);
}
</style>
